<!-- 审批状态tag,列表中使用 -->
<template>
  <div class="status-tag">
     <div class="tag" :style="`background-color:${cur.color};`"></div>
     <div class="text">{{ cur.name }}</div>
  </div>
</template>
<script>
import { MetrologicalStatusOptions } from '@/views/maintenance-decision/constants'
export default {
    props: {
        id: {
            type: Number,
            required: true
        },
        type: {
            type: String,
            default: 'appprove'
        }
    },
    data() {
        return {
            cur: {
                name: ''
            },
            // 计量审批状态
            statueTypes: [
                {
                    id: '',
                    name: '全部',
                    color: '#ccc'
                },
                {
                    id: 0,
                    name: '待提交',
                    color: '#f9d27d'
                },
                {
                    id: 1,
                    name: '审批中',
                    color: '#1989fa'
                },
                {
                    id: 2,
                    name: '审批通过',
                    color: '#67C23A'
                },
                {
                    id: 3,
                    name: '审批驳回',
                    color: 'red'
                },
                {
                    id: 4,
                    name: '已撤销',
                    color: '#E6A23C'
                },
            ],
            // 计量状态
            jiliangTypes: []

        }
    },
    watch: {
        type: {
            immediate: true,
            handler(val) {
                if (val === 'jiliang') {
                    const MetrologicalStatusColor = {
                        1: '#E6A23C',
                        2: '#0162FF',
                        3: '#F56C6C',
                        4: '#67C23A',
                    }
                    this.jiliangTypes = MetrologicalStatusOptions.map(el => {
                        return {
                            ...el,
                            color: MetrologicalStatusColor[el.id] 
                        }
                    })
                }
                if (val === 'approve') {
                    this.statueTypes = [
                        {
                            id: '',
                            name: '全部',
                            color: '#ccc'
                        },
                        {
                            id: 0,
                            name: '待提交',
                            color: '#f9d27d'
                        },
                        {
                            id: 1,
                            name: '审批中',
                            color: '#1989fa'
                        },
                        {
                            id: 2,
                            name: '审批通过',
                            color: '#67C23A'
                        },
                        {
                            id: 3,
                            name: '审批驳回',
                            color: 'red'
                        },
                        {
                            id: 4,
                            name: '已撤销',
                            color: '#E6A23C'
                        },
                    ]
                }
            }
        },
        id: {
            immediate: true,
            handler(val) {
                this.setCurTag(val)
            }
        }
    },
    methods: {
        setCurTag(id) {
            let arr = []
            if (this.type === 'appprove') {
                arr = this.statueTypes
            }
            
            const tagObject = arr.find(el => el.id === Number(id))
            if (tagObject) {
                this.cur = tagObject
            }
        }
    }
}
</script>
<style scoped lang="scss">
.status-tag{
  display: flex;
  align-items: center;
  font-size: 14px;
  .tag{
    margin-right: 8px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
  }

}
  
</style>
